<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .active{
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th><button type="button" v-on:click="moreRemove(books)">批量</button></th>
            <th>序号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="collection">
        <tr v-for ="(book,index) in books" :key="book.id" :class="{'active': book.isActived}">
            <td><input type="checkbox" :checked="book.isChecked" @click="selected(book)" /></td>
            <td>{{book.id}}</td>
            <td>{{book.bookName}}</td>
            <td>{{book.tdate}}</td>
            <td>{{formatPrice(book.price)}}</td>
            <td><button-num :book='book'></button-num></td>
            <td><button-remove v-on:remove-num="remove(index)"></button-remove></td>
        </tr>
        </tbody>
    </table>
    <h4></h4>
    <h3>总价格：{{formatPrice(total)}}</h3>
</div>
<hr >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var ComponentA = {
        props: ['book'],
        template: `
				    <button
				      type="button"
				      v-on:click="$emit('reduce-num')"
					  :disabled="book.num<1">
					  -</button>
				  `
    };

    var ComponentB = {
        template: `
				    <button
				      type="button"
				      v-on:click="$emit('add-num')">
					  +</button>
				  `
    };

    Vue.component('button-num',{
        props: ['book'],
        template: `
				<div>
				    <button-reduce v-bind:key="book.id+book.bookName" v-bind:book="book" v-on:reduce-num="reduce(book)"></button-reduce>
					{{book.num}}
					<button-add v-bind:key="book.id" v-bind:book="book" v-on:add-num="add(book)"></button-add>
				</div>
				  `,
        components: {
            'button-reduce': ComponentA,
            'button-add': ComponentB,
        },
        methods:{
            add: function(item){
                console.log(item);
                item.num++;
            },
            reduce: function(item){
                console.log(item);
                item.num--;
            },
        },
    });

    var ComponentC = {
        template: `
				    <button type="button"
					v-on:click="$emit('remove-num')">
					移除</button>
				  `
    };
    var app = new Vue({
        el: '#app',
        data: {
            books: [
                {isActived:false,isChecked:false,id: 1,tdate: '2010-10',price: 60,num:1,bookName: '<<PHP从入门到放弃>>'},
                {isActived:false,isChecked:false,id: 2,tdate: '2012-10', price: 90,num:1,bookName: '<<Python从入门到放弃>>'},
                {isActived:false,isChecked:false,id: 3,tdate: '2013-10',price: 80.01,num:1,bookName: '<<什么都是从入门到放弃>>'},
                {isActived:false,isChecked:false,id: 4,tdate: '2011-10',price: 70.00,num:1,bookName: '<<Java从入门到放弃>>'},
            ],
            activeId: '',
        },
        computed:{
            total: function() {
                return this.books.reduce((returnVal,nextItem) => returnVal + nextItem.price * nextItem.num, 0);
            },
            formatPrice: function(){
                return price => '￥' + price.toFixed(2);
            }
        },
        methods:{
            remove: function(index){
                console.log(index);
                console.log("num=="+this.books.length);
                this.books.splice(index,1);
                if(this.books.length===0){
                    let h4 = document.getElementsByTagName("h4")[0];
                    h4.innerText = '无商品';
                    console.log("msg=="+this.books.msg)
                }
            },
            add: function(item){
                console.log(item);
                item.num++;
            },
            reduce: function(item){
                console.log(item);
                item.num--;
            },
            selected: function(item) {
                console.log(item);
                item.isActived = !item.isActived;
            },
            moreRemove: function(books){
                console.log(books);
                for(var i=0;i<books.length;i++){
                    if(books[i].isActived==true){
                        console.log(books[i])
                        this.books.splice(books[i].id-1,1);
                    }
                }
            }
        },
        components: {
            'button-remove': ComponentC,
        },
    });


</script>
</body>
</html>
